<template>
    <div class="comment">
        <h3>发表评论</h3>
        <textarea cols="30" rows="4" placeholder="请输入不超过120字的评论" maxlength="120" v-model="commentContent"></textarea>
        <mt-button size="large" type="primary" @click="postComment">发表评论</mt-button>
        <div class="comment-item"  v-for="(item,index) in comments" :key="item.add_time+index">
            <p class="top">
                <span>第{{index+1}}楼</span>
                <span>用户：{{item.user_name}}</span>
                <span>发表时间：{{item.add_time | dateFormat}}</span>
            </p>
            <p class="bottom">
                <span>{{item.content===''?'这个同学你没学好，没添加正确！！':item.content}}</span>
            </p>
        </div>

        <mt-button plain  size="large" type="danger" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        name: "comment",
        props:['id'],
        data(){
            return{
                pageindex:1,
                comments:[],
                commentContent:''
            }
        },
        methods:{
            getComments(){ //获取评论数据
                this.$http.get(`api/getcomments/${this.id}?pageindex=${this.pageindex}`).then(response=>{
                // this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(response=>{
                //     console.log(response);
                    this.comments = this.comments.concat(response.body.message)
                },error=>{
                    Toast('获取评论数据失败！')
                })
            },
            getMore(){ //获取更多评论数据
                //1、改变pageindex的数值，2、执行 getComments()获取数据，
                this.pageindex ++;
                this.getComments()
            },
            postComment(){ //完成提交评论功能 ,post三个参数，参数1：url地址,参数2：是你要提交内容的对象,参数3：可选，设置一个提交的格式
                // console.log(response);
                // 意味着我已经把数据提交上去了，服务器已经有我这条数据 ，正常是要刷新页面方式，重新获取数据，这样做会给浏览器造成消耗
                //我在本地把我这条评论渲染出来，
                //在提交post请求之前，要做判断，排除空的内容，和空格
                //如果是一个值进行判断，只有五个情况是false 数字：0 ，字符串：'',undefined，null ，NaN
                if (!this.commentContent.trim()){  //判断是否是空的评论，
                    Toast('不能提交空的评论！！');
                    return
                }
                this.$http.post('api/postcomment/'+this.id,{content:this.commentContent}).then(response=>{

                    let d= new Date();
                    this.comments.unshift({add_time:d.getTime(),content:this.commentContent,user_name:'匿名用户'});
                    this.commentContent =''
                },error=>{
                    Toast('提交评论数据失败！！');
                })
            }
        },
        created(){
            this.getComments()
        }
    }
</script>

<style scoped lang="scss">
.comment{
    h3{
        font-size: 16px;
    }
    textarea{
        font-size:12px;
        height: 90px;
        margin-bottom: 0;
    }
    .comment-item{
        .top{
            background-color: #e3e3e3;
            height: 35px;
            line-height: 35px;
            display: flex;
            justify-content: space-around;
            color: #333333;
        }
        .bottom{
            text-indent: 24px;
            font-size: 13px;
        }
    }
}
</style>
